import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table,Col, Divider, Row, message , } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"

import {
  getHospitalListRequest,
  getProvinceRequest,
  getCityOrDistrictRequest,
  getRequestChangeStatus} from '@/api/hospital/hospitalList'

import type{
  getHospitalListSearchParamsType,
  hospitalListContentType,
  hospitalListItemsType,
  getProvinceReturnType
} from '@/api/hospital/model/hospitalListType'
import { use } from 'i18next'
import { useNavigate, useParams } from 'react-router-dom'
import { status } from 'nprogress'

export default function HospitalList() {
   //表单
  const [form] = Form.useForm();
  //跳转路由
  const navigate = useNavigate();
  //search路由传参就用location  会报错不会写
  //const state:boject = useLocation 这个




  //控制表格是否加载中的状态
  const [isLoading, setIsLoading] = useState(false)
  //控制当前页码的状态
  const [page,setPage] = useState(1);
  //控制每页显示的条数
  const [limit,setLimit] = useState(3);
  //控制查询时用户输入的表单参数
  const [searchParams,setSearchParams] = useState<getHospitalListSearchParamsType>({});
  //控制表格的数据
  const [hospitalList,setHospitalList] = useState<hospitalListContentType>([])
  //控制医院总数量
  const [total,setTotal] = useState(0)
   //控制省份状态
   const [province,setProvince] = useState<getProvinceReturnType>([])
   //控制市状态
   const [cityList,setCityList] = useState<getProvinceReturnType>([])
  //控制区的数据
    const [district,setDistrict] = useState<getProvinceReturnType>([])
  //控制医院类型   这些返回值都是一样的所以这么写
    const [hospitalType,setHospitalType] = useState<getProvinceReturnType>([])
  //控制重新渲染的state
   const [reRender,setRender] = useState(false)



  //1.刚加载组件的时候,发送医院列表请求
  useEffect(()=>{
    const getHospitalList = async() => {
     // console.log(searchParams,'c');
     //设置进来为加载true查询 
     setIsLoading(true);
     const resulte= await getHospitalListRequest (page,limit,searchParams) 
     //把结果中的医院列表的数组设置给状态state
     setHospitalList(resulte.content)
     //把结果中的医院总数设置给状态码
     setTotal(resulte.totalElements)
     setIsLoading(false);
     
     //setRender(!reRender)
    }
    getHospitalList()
    //你写错误之一 你把你请求的东西设置成setsearchParams这样了 你根本就没发送请求
  },[searchParams,page,limit,reRender])

  //2.请求所有的省份   接口注意坏没坏       拿到省之后
  useEffect(()=>{
    const getProvince = async() => {
      const result =await getProvinceRequest();
      //console.log(result,'result');
      //把得到的省份列表放到state中  result就是那个数组
      setProvince(result);
    };
    getProvince();
  },[])

  //3.初始化的时候立即请求医院类型  三级甲等乙等这个数据  useEffect不写参数就是任何数据改变都重新执行 空数组是初始化执行
 useEffect (()=>{
  const getHospitalType = async () =>{
    //这个10000是因为后端偷懒固定的 实际不是
     const result = await getCityOrDistrictRequest('10000');
     //console.log(result);
     setHospitalType(result)
  }
  getHospitalType()
 },[])

  //事件回调函数 
  //1.选中省份后的回调函数 其实是市或者区 value是可以看到的自已a一下就可以打印看到
  const changeProviceHandle = async(value:string)=>{
   //根据省份的value,发送市的请求
   const result = await getCityOrDistrictRequest(value);
   //console.log(result);
   setCityList(result)
    //选择完省时候清空其他  跟下面name一一对应
       form.setFieldsValue({cityCode:null, districtCode:null})
    //清空县的数据
       setDistrict([])   
  }
  
  //2.选中城市的时候回调函数
  const cityChangeHandle = async (value:string) => {
    //根据省份value  发送市的请求
    const result = await getCityOrDistrictRequest(value);
    //把结果交给state方法
    setDistrict(result)
    //选择完省时候清空其他  跟下面name一一对应   
    form.setFieldsValue({districtCode:null})
  }
   

  // const changeProviceHandle = async (value:string) =>{ 
  //  const result = await getCityOrDistrictRequest(value);
  //  setCityList(result)
  //  form.setFieldsValue({districtcode:null})
  // }



  //3.查询表单的提交的事件
  const finishHandle = (value:getHospitalListSearchParamsType) => {
    console.log(value);
   setSearchParams(value)
  }

  //4.点击查询表单 清空按钮的清空事件
  const clearSearchHandle = () =>{
    //改成空对象
    setSearchParams({})
  }

  //5.点击查看按钮事件回调函数  用state传参    因为传参必须return出去?????
  const hospitalDetailHandle = (id:string) =>{
    return () => {
      navigate(`/syt/hospital/hospitalShow/${id}`,{
        //测试state传值(练习而已)
        state:{hello:'world'}
      });
    };
  }
   
  //6.点击按钮医院上下线的回调函数
  const changeStateHandle = (id:string,status:0 | 1) => {
  return async ()=>{
  await getRequestChangeStatus(id,status);
  message.success('改变上下线成功')
  //重新渲染
  setRender(!reRender)
  }
  }

  //7.点击排班规则
  const showScheduleHandle = (hoscode:string) => {
    return () =>{
    navigate (`/syt/hospital/HospitalSchedule/${hoscode}`)

    }
  
  }

  //const tableData: any[] = [];
  //写成下面真实数据
   
  const columns = [
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    //data:image/jpeg;base64直接看老师拿的是解码的意思???
    {
      title: '医院Logo',
      //dataIndex: 'hosname', 
      //写法一:如果没有dataIndex设置,则render中拿到的数据就是当前整个完整的数据
      // render(_:any,data:any){
      //   return (<img width ={100} src={`data:image/jpeg;base64,${data.logoData}`} alt="" />)
      // }
        //写法二:如果设置了dataIndex,则render拿到dataIndex对应的数据 再进行操作就按照下面写
        dataIndex:'logoData',
        render(logoData:string){
          return (<img width ={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />)
        }
    },
    {
 
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      //dataIndex:'string',没用了 (你看视图如果没有数据就render渲染真实的 )
      render(_:any,data:hospitalListItemsType){
      return data.param.hostypeString
      }
    },
    {
      title: '详细地址',
      //dataIndex: 'signKey',
      render(_:any,data:hospitalListItemsType) {
        return data.param.fullAddress
      }
    },
    {
      title: '状态',
     // dataIndex: 'contactsName',
      render(_:any,data:hospitalListItemsType){
        return data.status ===0?"下线":'上线'
        }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      //dataIndex: "id",
      //dataIndex: "do",这个是有匹配的值就匹配没有匹配就没有  render(_: any,) { 原来是这么写的   查看需要idrender(id:string,) {
      render(_:any,data:hospitalListItemsType) {
        return (
          <div>
            {/* 写data.id 是因为data获取所有 */}
            <Button type='primary' onClick={hospitalDetailHandle(data.id)}>查看</Button>
            <Button type='primary' onClick={showScheduleHandle(data.hoscode)}>排班</Button>
            <Button type='primary' onClick={changeStateHandle(data.id,data.status ===0?1:0)}>{data.status ===0?"下线":'上线'}</Button>
            {/* 看数据时候去network 发请求的3 中的 preview */}
          </div >
        )
      }
    }
  ];
  return ( 
     <div>
    <Card>
      <Form
        name="basic" 
        form = {form}
        onFinish={finishHandle}
        //获取form才能清空表单等等操作
        // wrapperCol={{ span: 30 }}
        //layout='inline' 不能共用栅格系统
      >
        {/* 栅格系统不用style样式 然后用row包裹住为一行 */}
        {/* Col使用是包裹住Form.Item让每一个下拉框相等 */}
        {/* row中gutter 就是外间距 */}
        <Row gutter={10}>
          <Col span={4}>
        <Form.Item
        // name="province" 改成provinceCode 因为是类型定义的你收集发送搜索待按照它定义的名字 下面市和区也是
          name="provinceCode"
        >
          <Select
            placeholder="请输入省份"
            allowClear
            //三级联动就是当一级搜索发生变话调用onChange发送请求 请求市
            onChange={changeProviceHandle}
          >
            {/* 遍历省份数组 item.name=各个省份名字` value是value它提供的 通过id发请求 独一无二的key 一直打印是useeffect的错*/}
            {province.map((item)=>{
           return(<Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
            )})}
          </Select>
        </Form.Item>
        </Col >
        <Col span={4}>
        <Form.Item
        //注意修改name 不然会有71000的错误  也跟定义类型的名字一样收集表单
          name="cityCode"  
        >
          <Select
            placeholder="请输入市"
            allowClear
            onChange={cityChangeHandle}
          >
             {cityList.map((item)=>{
           return (<Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
            )})}
          </Select>
        </Form.Item>
        </Col >
        <Col span={4}>

        <Form.Item
          name="districtCode"
          
        >
          <Select
            placeholder="请输入县/区"
            allowClear
          >
             {district.map((item)=>{
           return (
           <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
           )  })}
          </Select>
        </Form.Item>
        </Col >
        <Col span={4}>
        <Form.Item
          name="hosname"
       
        >
          <Input placeholder="医院名称" />
        </Form.Item>
        </Col >
        <Col span={4}>
        <Form.Item
          name="hoscode"
          
        >
          <Input placeholder='医院编号' />
        </Form.Item>
        </Col >
        <Col span={4}>
        <Form.Item
          name="hostype"
          
         
        >
          <Select
            placeholder="医院类型"
            allowClear
          >
            {/* select.option你收集的是value这个值不是 后面你写的三级甲等 三级乙等文字 */}
            {/* <Select.Option value="三级甲等">三级甲等</Select.Option>
            <Select.Option value="三级乙等">三级乙等</Select.Option>
            <Select.Option value="二级甲等">二级甲等</Select.Option>
            <Select.Option value="二级乙等">二级乙等</Select.Option> 下面用真正的遍历*/}
             {hospitalType.map((item)=>{
           return (
           <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
           )  })}
          </Select>
        </Form.Item>
        </Col >
        </Row>

        <Row gutter={10}>
        <Col span={4}>
        <Form.Item
          name="status"
         
        >
          <Select
            placeholder="医院状态"
            allowClear
          >
            {/* value={1}这是数字  value='1'这是字符串 */}
            <Select.Option value={1}>上线</Select.Option>
            <Select.Option value={0}>下线</Select.Option>
          </Select>
        </Form.Item>
        </Col>
{/* button占一行 设置size 谁的毛病去看谁的属性 */}
        <Col span={2}>
        <Form.Item >
          <Button type="primary" htmlType="submit"   >
            查询
          </Button>
        </Form.Item>
        </Col>
        <Col span={2} offset={-0.5}>
        <Form.Item  >
          <Button
           type="default" 
           htmlType="reset"
           onClick={clearSearchHandle}
           >
            清空
          </Button>
        </Form.Item>
        </Col>
        </Row>


      </Form>



      <Table
        style={{ marginTop: "30px" }}
        columns={columns}
        //就拿取了列表数据
        dataSource={hospitalList}
        scroll={{ x: 1100 }}
        bordered
        //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
        rowKey="id"
        loading={isLoading}

        pagination={{
          //页码的配置：当前页码
          current: page,
          //总数据的数量
          total: total,
          //每页条数 你把limit这个改了
          pageSize: limit,
          //展示更改每页条数的选项(默认total大于50条的时候开启)
          pageSizeOptions: [3, 8, 15],
          //是否直接开启更新每页条数的选项
          showSizeChanger: true,

          showTotal(total) {
            return `总共有${total}条数据`
          },
          onChange(page:number,pageSize:number){
            setPage(page);
            setLimit(pageSize);
          }
        }}
      />
    </Card>
  </div >
)
}